<template>
	<view class="container">
		<!-- 登录 -->
		<uni-forms class="form" ref="loginForm" :modelValue="formData"  label-align='center' :rules="rules">
							<uni-forms-item label="" name="loginId" >
								<uni-easyinput prefixIcon="person" v-model="formData.loginId" placeholder="请输入账号" :clearable='false'  />
							</uni-forms-item>
							<uni-forms-item label="" name="password"  >
								<uni-easyinput v-model="formData.password" placeholder="请输入密码" prefixIcon="locked" type="password" :clearable='false' />
							</uni-forms-item>
							
						</uni-forms>
						<button type="primary"  @click="submit(loginForm)">登录</button>
		
	</view>
</template>

<script setup>
	import {ref} from 'vue'
	import {loginApi} from '../../api/user.js'
// import { log } from 'console';
	let loginForm=ref()
	let formData=ref({
		loginId:'',
		password:''
	})
	let rules=ref({
		loginId: {
							rules: [{
									required: true,
									errorMessage: '请输入账号',
								},
								{
									minLength: 2,
									maxLength: 11,
									errorMessage: '账号长度在 {minLength} 到 {maxLength} 个字符',
								}
							]
						},
		password: {
							rules: [{
									required: true,
									errorMessage: '请输入密码',
								},
								{
									minLength: 6,
									maxLength: 12,
									errorMessage: '密码长度在 {minLength} 到 {maxLength} 个字符',
								}
							]
						},
	})
	const submit=(val)=>{
		val.validate().then(res=>{
			loginApi(formData.value).then(res=>{
				// console?.log(res)
				if(res.data.code==200){
					uni.setStorageSync('user',
						res.data.data
					)
					// console.log(uni.getStorageSync('user'))
					uni.showToast({
						title:'登录成功',
						success() {
							// console.log(111,res.data)
							
							
							uni.switchTab({
								url:'/pages/index/index'
							})
						}
					})
				}else{
					uni.showToast({
						title:res.data.message,
						icon:'error'
					})
				}
				// console.log(res)
				
				
			})
		}).catch(err=>{
			console.log(err)
		})
		
		// if(login)
	}
</script>

<style lang="scss" scoped>
	       .container{
			   display: flex;
			   justify-content: center;
			   align-items: center;
			   height:calc(100vh - 44px);
			   flex-direction: column;
			   .form{
				   width:80vw ;
			   }
			   button{
				   width:80vw
			   }
		   }
</style>
